<template>
  <div class="wrap">
    <div class="echart">
      <div id="e1"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  mounted () {
    this.init1()
  },
  methods: {
    init1 () {
      var chartDom = document.getElementById("e1")
      var myChart = echarts.init(chartDom)
      var option = {
        color: ['#df87ff', '#6d9fff', '#8e65ff'],
        series: [
          {
            name: "Access From",
            type: "pie",
            selectedMode: "single",
            radius: '50%',

            data: [
              { value: 20, name: "一级目录" },
              { value: 25, name: "二级目录" },
              { value: 55, name: "不重要" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100vh;
  background: url("../assets/bqgl.png") no-repeat top;
  background-size: cover;
  position: relative;


  .echart {
    position: absolute;
    top: 33%;
    left: 35%;
  }

  #e1 {
    width: 400px;
    height: 400px;
  }
}
</style>
